<template>
  <PageContainer :hasTitle="false" :pullRefresh="true" :noPadding="true">
    <div class="restaurant-page">
      <!-- 餐厅封面区域 -->
      <div class="restaurant-cover">
<!--        <div class="back-button" @click="$router.back()">-->
<!--          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">-->
<!--            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>-->
<!--          </svg>-->
<!--        </div>-->
        <div class="restaurant-image">
          <img :src="getShopDetailsDataInfo?.shop_banner_list?.[0]" alt="Restaurant Cover" />
        </div>
      </div>

      <!-- 餐厅详情区域 -->
      <div class="restaurant-details">
        <h1 class="restaurant-name">{{ getShopDetailsDataInfo?.shop_title }}</h1>

        <div class="restaurant-tags">
          <span v-for="(tag, index) in getShopDetailsDataInfo?.user_label_list" :key="index">{{ tag.title }}</span>
        </div>

        <div class="restaurant-info">
          <div class="rating-container">
            <svg class="star-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
              </path>
            </svg>
            <span class="rating-text">{{ getShopDetailsDataInfo?.star }} ({{ getShopDetailsDataInfo?.buy_num }})</span>
          </div>

        </div>

        <p class="restaurant-description">
          {{
            getShopDetailsDataInfo?.shop_describe ||
            'Authentic Italian cuisine with a modern twist. Our dishes are made with fresh, locally sourced ingredients.'
          }}
        </p>
      </div>

      <!-- 搜索菜单栏 -->
      <div class="menu-search">
        <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <input type="text" placeholder="Search menu items" v-model="searchKeyword" @keyup.enter="searchMenuItems"
          @input="handleInput" />
      </div>

      <!-- 菜单分类导航 -->
      <div class="category-tabs">
        <div class="tab-item" v-for="category in getProductClassList" :key="category.id"
          :class="{ active: activeCategory === category.id }" @click="scrollToCategory(category.id)">
          {{ category.type_name }}
        </div>
      </div>

      <!-- 菜单内容区域 -->
      <div class="menu-container">

        <div v-for="dish in getShopGoodsLists" :key="dish.id" class="dish-card">
          <div class="dish-header">
            <div class="dish-content">
              <h3 class="dish-name">{{ dish.goods_name }}</h3>
              <p class="dish-description">{{ dish.describe }}</p>
              <div class="dish-price">${{ dish.goods_money }}</div>
            </div>

            <div class="dish-image">
              <img :src="dish.head_img?.[0]" :alt="dish.goods_name" />
            </div>
          </div>

          <div class="dish-rating">
            <svg class="star-icon-small" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
              </path>
            </svg>
            <span>{{ dish.star }} ({{ dish.buy_num }})</span>
          </div>

          <div class="dish-action-container">
            <button class="order-now-btn" @click="orderNow(dish.id)">Order Now</button>
          </div>
        </div>

        <div class="flex justify-center" v-if="getGoodsListData.page * getGoodsListData.limit < dataTotal">
          <el-button @click="loadNextPageData" type="danger">LOAD</el-button>
        </div>

        <div class="margin-top" style="text-align: center;" v-else>---- {{ dataTotal == 0 ? 'NO DATA' : 'NO MORE DATA'
        }} ---
        </div>

      </div>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PageContainer from '@/components/layout/PageContainer.vue'
import { getShopGoodsList, getProductClass, getShopDetails } from '@/api'


// 路由和导航
const route = useRoute()
const router = useRouter()


const activeCategory = ref<number>(0)
const searchKeyword = ref<string>('')
const searchTimer = ref<number | null>(null)


const getProductClassList: any = ref([])
const getShopGoodsLists: any = ref([])
const getShopDetailsDataInfo: any = ref(null)

const shopId = route.params.id;


const getGoodsListData = ref({
  shopId: shopId,
  classId: 0,
  page: 1,
  limit: 20,
  keyword: ''
})

const dataTotal = ref(0)

const loadNextPageData = () => {
  getGoodsListData.value.page++

  getGoodsList()
}


const getGoodsList = () => {
  getShopGoodsList({
    ...getGoodsListData.value,
    classId: activeCategory.value,
    keyword: searchKeyword.value
  }).then(res => {

    dataTotal.value = res.data.total

    getShopGoodsLists.value = getGoodsListData.value.page == 1 ? res.data.data : getShopGoodsLists.value.concat(res.data.data)
  })
}

//获取店铺分类
const getGoodsClassList = () => {
  getProductClass({ shopId: shopId }).then(res => {
    getProductClassList.value = res.data

    activeCategory.value = getProductClassList.value[0].id
    getGoodsList()


  })
}
const getShopDetailsData = () => {
  getShopDetails({ shopId: shopId }).then(res => {
    getShopDetailsDataInfo.value = res.data
  })
}

getGoodsClassList()
getShopDetailsData()





// 滚动到指定分类
const scrollToCategory = (categoryId: number) => {
  activeCategory.value = categoryId
  getGoodsListData.value.page = 1
  getGoodsList()
}

const orderNow = (id: any) => {
  // router.push(`/product/${id}`)

  router.push({
    path: `/product/${id}`,
    query: {
      shopId: getGoodsListData.value.shopId
    }
  })
}

// 搜索菜单项
const searchMenuItems = () => {
  getGoodsList()
}

// 处理输入，实现移动端输入后自动搜索（延迟执行避免频繁请求）
const handleInput = () => {
  if (searchTimer.value) {
    clearTimeout(searchTimer.value)
  }

  searchTimer.value = setTimeout(() => {
    searchMenuItems()
  }, 500) as unknown as number
}

// 生命周期钩子
onMounted(() => {
  // fetchRestaurantData()
})
</script>

<style lang="scss" scoped>
@use 'sass:color';
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.restaurant-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 60px; // 为底部的用户类型切换器留出空间
}

// 餐厅封面区域
.restaurant-cover {
  position: relative;
  height: 220px;
  width: 100%;
  background-color: #e5e5e5;

  .back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;

    svg {
      width: 24px;
      height: 24px;
      color: #333;
    }
  }

  .restaurant-image {
    width: 100%;
    height: 100%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

// 餐厅详情区域
.restaurant-details {
  padding: 20px 16px;
  background-color: white;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

.restaurant-name {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px;
}

.restaurant-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;

  span {
    font-size: 14px;
    color: #666;
    padding: 4px 12px;
    background-color: #f0f0f0;
    border-radius: 20px;
  }
}

.restaurant-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;

  .rating-container {
    display: flex;
    align-items: center;
    gap: 4px;

    .star-icon {
      width: 18px;
      height: 18px;
      color: #ffc107;
    }

    .rating-text {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
  }

  .delivery-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #666;

    .clock-icon {
      width: 18px;
      height: 18px;
      color: #666;
    }

    .dot-separator {
      margin: 0 4px;
    }

    .delivery-fee {
      color: #4caf50;
    }
  }
}

.restaurant-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

// 搜索菜单栏
.menu-search {
  display: flex;
  align-items: center;
  background-color: white;
  margin: 0 16px 16px;
  padding: 0 12px;
  height: 44px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .search-icon {
    width: 18px;
    height: 18px;
    color: #999;
    margin-right: 8px;
  }

  input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }
}

// 分类导航
.category-tabs {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 0 16px 16px;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  .tab-item {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;

    &.active {
      color: white;
      background-color: #ef4444;
    }
  }
}

// 菜单内容
.menu-container {
  padding: 0 16px 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px;
  border-left: 4px solid #ef4444;
  padding-left: 12px;
}

.menu-section {
  margin-bottom: 24px;
}

.dish-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dish-card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;

  .dish-header {
    display: flex;
    margin-bottom: 16px;

    .dish-content {
      flex: 1;
      padding-right: 2px;
    }

    .dish-image {
      width: 50%;
      height: 50%;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .dish-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
  }

  .dish-description {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dish-price {
    font-size: 16px;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 8px;
  }

  .dish-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;

    .star-icon-small {
      width: 14px;
      height: 14px;
      color: #ffc107;
    }

    span {
      font-size: 13px;
      color: #666;
    }

    .popular-tag {
      background-color: #fff3e6;
      color: #ff6b01;
      font-size: 12px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 4px;
      margin-left: 8px;
    }
  }

  .dish-action-container {
    width: 100%;
    margin-top: auto;

    .order-now-btn {
      width: 100%;
      font-size: 16px;
      font-weight: 500;
      color: white;
      background-color: #ef4444;
      border: none;
      padding: 10px 0;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);

      &:active {
        background-color: color.adjust(#ef4444, $lightness: -5%);
      }
    }
  }
}

// 用户类型切换器 - 仅用于开发测试
.user-type-switcher {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .user-type-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    background-color: #fff;
    border: none;
    cursor: pointer;

    &.active {
      color: #ef4444;
      font-weight: 600;
      border-bottom: 2px solid #ef4444;
    }
  }
}
</style>
